{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from ipywidgets import HBox, VBox\n",
    "import numpy as np\n",
    "import matplotlib.pyplot as plt\n",
    "from IPython.display import display\n",
    "%matplotlib inline"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "4844af8326db4e0aaca66f835483a8ba",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=5, description='x', max=15, min=-5), Output()), _dom_classes=('widget-in…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "@widgets.interact\n",
    "def f(x=5):\n",
    "    print(x)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9ab13281be084b5c8ed81c1d1c314660",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=5, description='x', max=5), Output()), _dom_classes=('widget-interact',)…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "@widgets.interact(x=(0, 5))\n",
    "def f(x=5):\n",
    "    print(x)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "bf9e689d02714488a3b93079f184d922",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=1.0, description='freq', max=3.0, min=-1.0), Dropdown(description='col…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "@widgets.interact_manual(\n",
    "    color=['blue', 'red', 'green'], lw=(1., 10.))\n",
    "def plot(freq=1., color='blue', lw=2, grid=True):\n",
    "    t = np.linspace(-1., +1., 1000)\n",
    "    fig, ax = plt.subplots(1, 1, figsize=(8, 6))\n",
    "    ax.plot(t, np.sin(2 * np.pi * freq * t),\n",
    "            lw=lw, color=color)\n",
    "    ax.grid(grid)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f9c12dfa9a4d40b5982f2f7125aa9afb",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatSlider(value=2.0, description='Frequency:', max=10.0, min=1.0, readout_format='.1f')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "freq_slider = widgets.FloatSlider(\n",
    "    value=2.,\n",
    "    min=1.,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='Frequency:',\n",
    "    readout_format='.1f',\n",
    ")\n",
    "freq_slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5087f9bf954a4253a469ebeecfcc694f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatRangeSlider(value=(-1.0, 1.0), description='xlim:', max=5.0, min=-5.0, readout_format='.1f')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "range_slider = widgets.FloatRangeSlider(\n",
    "    value=[-1., +1.],\n",
    "    min=-5., max=+5., step=0.1,\n",
    "    description='xlim:',\n",
    "    readout_format='.1f',\n",
    ")\n",
    "range_slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f1eef7e0d4e74b828e8532f7200af4af",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "ToggleButton(value=False, description='Grid', icon='check')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "grid_button = widgets.ToggleButton(\n",
    "    value=False,\n",
    "    description='Grid',\n",
    "    icon='check'\n",
    ")\n",
    "grid_button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "894ee1de1812423681e54191730f044c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "ToggleButtons(description='Color:', options=('blue', 'red', 'green'), value='blue')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "color_buttons = widgets.ToggleButtons(\n",
    "    options=['blue', 'red', 'green'],\n",
    "    description='Color:',\n",
    ")\n",
    "color_buttons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1c7c462b19b44d59a6019be01a7ebaab",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='Hello World', description='Title:')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "title_textbox = widgets.Text(\n",
    "    value='Hello World',\n",
    "    description='Title:',\n",
    ")\n",
    "title_textbox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "10f0ce31905d4d01971ffef808a1f27b",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "ColorPicker(value='#efefef', concise=True, description='Background color:')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "color_picker = widgets.ColorPicker(\n",
    "    concise=True,\n",
    "    description='Background color:',\n",
    "    value='#efefef',\n",
    ")\n",
    "color_picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "03988bbf18bb48b19e5f5e271fe6dacd",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='Plot', style=ButtonStyle())"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "button = widgets.Button(\n",
    "    description='Plot',\n",
    ")\n",
    "button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [],
   "source": [
    "def plot2(b=None):\n",
    "    xlim = range_slider.value\n",
    "    freq = freq_slider.value\n",
    "    grid = grid_button.value\n",
    "    color = color_buttons.value\n",
    "    title = title_textbox.value\n",
    "    bgcolor = color_picker.value\n",
    "\n",
    "    t = np.linspace(xlim[0], xlim[1], 1000)\n",
    "    f, ax = plt.subplots(1, 1, figsize=(8, 6))\n",
    "    ax.plot(t, np.sin(2 * np.pi * freq * t),\n",
    "            color=color)\n",
    "    ax.grid(grid)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "@button.on_click\n",
    "def plot_on_click(b):\n",
    "    plot2()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
    "tab1 = VBox(children=[freq_slider,\n",
    "                      range_slider,\n",
    "                      ])\n",
    "tab2 = VBox(children=[color_buttons,\n",
    "                      HBox(children=[title_textbox,\n",
    "                                     color_picker,\n",
    "                                     grid_button]),\n",
    "                                     ])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "96e9375266f54c2699b71d34d1369363",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(Tab(children=(VBox(children=(FloatSlider(value=2.0, description='Frequency:', max=10.0, min=1.0…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "tab = widgets.Tab(children=[tab1, tab2])\n",
    "tab.set_title(0, 'plot')\n",
    "tab.set_title(1, 'styling')\n",
    "VBox(children=[tab, button])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from traitlets import Unicode, Int, validate"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "class CounterWidget(widgets.DOMWidget):\n",
    "    _view_name = Unicode('CounterView').tag(sync=True)\n",
    "    _view_module = Unicode('counter').tag(sync=True)\n",
    "    value = Int(0).tag(sync=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.undef('counter');\n",
       "define('counter', [\"@jupyter-widgets/base\"],\n",
       "       function(widgets) {\n",
       "    var CounterView = widgets.DOMWidgetView.extend({\n",
       "\n",
       "        render: function() {\n",
       "            this.value_changed();\n",
       "            this.model.on('change:value',\n",
       "                          this.value_changed, this);\n",
       "\n",
       "            var model = this.model;\n",
       "            var that = this;\n",
       "\n",
       "            this.bm = $('<button/>')\n",
       "            .text('-')\n",
       "            .click(function() {\n",
       "                var x = model.get('value');\n",
       "                model.set('value', x - 1);\n",
       "                that.touch();\n",
       "            });\n",
       "\n",
       "            this.bp = $('<button/>')\n",
       "            .text('+')\n",
       "            .click(function() {\n",
       "                var x = model.get('value');\n",
       "                model.set('value', x + 1);\n",
       "                that.touch();\n",
       "            });\n",
       "\n",
       "            this.span = $('<span />')\n",
       "            .text('0')\n",
       "            .css({marginLeft: '10px',\n",
       "                  marginRight: '10px'});\n",
       "\n",
       "            $(this.el)\n",
       "            .append(this.bm)\n",
       "            .append(this.span)\n",
       "            .append(this.bp);\n",
       "        },\n",
       "\n",
       "        value_changed: function() {\n",
       "            var x = this.model.get('value');\n",
       "            $($(this.el).children()[1]).text(x);\n",
       "        },\n",
       "    });\n",
       "\n",
       "    return {\n",
       "        CounterView : CounterView\n",
       "    };\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.undef('counter');\n",
    "define('counter', [\"@jupyter-widgets/base\"],\n",
    "       function(widgets) {\n",
    "    var CounterView = widgets.DOMWidgetView.extend({\n",
    "\n",
    "        render: function() {\n",
    "            this.value_changed();\n",
    "            this.model.on('change:value',\n",
    "                          this.value_changed, this);\n",
    "\n",
    "            var model = this.model;\n",
    "            var that = this;\n",
    "\n",
    "            this.bm = $('<button/>')\n",
    "            .text('-')\n",
    "            .click(function() {\n",
    "                var x = model.get('value');\n",
    "                model.set('value', x - 1);\n",
    "                that.touch();\n",
    "            });\n",
    "\n",
    "            this.bp = $('<button/>')\n",
    "            .text('+')\n",
    "            .click(function() {\n",
    "                var x = model.get('value');\n",
    "                model.set('value', x + 1);\n",
    "                that.touch();\n",
    "            });\n",
    "\n",
    "            this.span = $('<span />')\n",
    "            .text('0')\n",
    "            .css({marginLeft: '10px',\n",
    "                  marginRight: '10px'});\n",
    "\n",
    "            $(this.el)\n",
    "            .append(this.bm)\n",
    "            .append(this.span)\n",
    "            .append(this.bp);\n",
    "        },\n",
    "\n",
    "        value_changed: function() {\n",
    "            var x = this.model.get('value');\n",
    "            $($(this.el).children()[1]).text(x);\n",
    "        },\n",
    "    });\n",
    "\n",
    "    return {\n",
    "        CounterView : CounterView\n",
    "    };\n",
    "});\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cc15836d59aa4d12a601fed9692f9bfd",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CounterWidget()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "w = CounterWidget()\n",
    "w"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "0\n"
     ]
    }
   ],
   "source": [
    "print(w.value)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
